<template>
  <el-row>
    <el-col :span="24">
      <el-table
          :data="getData"
          style="width: 100%"
          height="300"
          header-cell-style="background:#f8f8f9;color:#535a6c">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="学生编号" width="100" />
        <el-table-column prop="userId" label="用户名" width="120">
          <template #default="scope">
            <UserNameById :id="scope.row.userId"></UserNameById>
          </template>
        </el-table-column>
        <el-table-column prop="studentId" label="学生号" width="140" />
        <el-table-column prop="studentName" label="学生姓名" width="140" />
        <el-table-column prop="studentSex" label="学生性别" sortable>
          <template #default="scope">
            <studentSex :studentSex="scope.row.studentSex"/>
          </template>
        </el-table-column>
        <el-table-column prop="majorId" label="专业编号" width="140" />
        <el-table-column prop="status" label="学生状态">
          <template #default="scope">
            <StatusTag :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="operation" label="操作" width="200">
          <template #default>
            <el-button-group>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此学生"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此学生"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="停用此学生"
                  placement="top"
              >
                <el-button type="warning" size="small" :icon="Remove"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script setup>
import {Remove,Edit,Delete} from "@element-plus/icons-vue";
import StatusTag from "@/components/table/StatusTag";
import StudentSex from "@/components/table/StudentSex";
import UserNameById from "@/components/user/UserNameById";
</script>

<script>
import {selectAllStudent} from "@/api/student";
export default {
  name: "Down",
  data() {
    return {
      data:''
    }
  },
  mounted() {
    //vue组件初始化
    this.getStudent();
  },
  methods:{
    async getStudent() {
      const t =await selectAllStudent();
      this.data = t.data.data
    }
  },
  computed:{
    getData() {
      return this.data;
    }
  }
}
</script>

<style scoped>

</style>